<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
//http://127.0.0.1:8080/crm/
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
$(function () {
	//给"阶段"下拉框添加change事件
	$("#create-transactionStage").change(function () {
		//收集参数
		//var stageValue=$("#create-transactionStage option:selected").text();
		var stageValue=$("#create-transactionStage option:selected").text();
		//表单验证
		if (stageValue==""){
			//清空可能性
			$("#create-possibility").val("");
			return;
		}
		//发送请求,从配置文件中拿到可能性的值
		$.ajax({
			url:'workbench/transaction/getPossibilityByStageValue.do',
			data:{
				stageValue:stageValue
			},
			type:'post',
			dataType:'json',
			success:function (response) {
				$("#create-possibility").val(response.data);
			}
		});
	});

	//当页面加载完成之后，对容器调用工具函数
	var name2id={};
	$("#create-accountName").typeahead({
		//source:['阿里巴巴','京东商城','腾讯','动力节点','字节跳动']
		source:function (query,process) {//每次键盘弹起，都会执行本函数；可以在函数中生成一个数据源(字符串数组)，交给source参数使用；source每次拿到数据源(字符串数组)，都会根据关键字比对,比对成功的字符串都会列容器下方，从而实现自动补全。
			//query：是用户在容器中输入的关键字
			//process：是一个bs_typeahead插件提供的函数，能够把一个json的字符串数组交给source使用。
			//向后台发送异步请求，查询客户名称组成字符串数组，以json字符串的形式返回，交给source使用
			$.ajax({
				url:'workbench/transaction/queryCustomerByName.do',
				data:{
					customerName:query
				},
				type:'post',
				dataType:'json',
				success:function (response) {//data就是json的字符串数组
					var customerNameArr=[];
					//遍历data复杂类型数组
					$.each(response.data,function (index,obj) {
						//生成简单类型数组
						customerNameArr.push(obj.name);
						//把obj的name和id赋值给name2id，把name作为name2id属性名，id作为name2id的属性值
						name2id[obj.name]=obj.id;

					});
					process(customerNameArr);
				}
			});
		},
		afterSelect:function (item) {//用户选中一项之后，自动触发本函数；
			//item：选中项，选中哪一个提示名字就是哪一个值
			//alert(name2id[item]);
			//根据值找到都对应的id
			$("#create-customerId").val(name2id[item]);
		}
	});

	//给日期输入框添加日期控件
	$(".mydate").datetimepicker({
		language: 'zh-CN',//语言
		format: 'yyyy-mm-dd',//日期格式
		minView: 'month',//日期选择器上最小能选择的日期的视图
		initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
		autoclose: true,//选择日期之后，是否自动关闭日历
		todayBtn: true,//是否显示当前日期的按钮
		clearBtn: true,//是否显示清空按钮
		// container:"#editActivityModal"
	});

	//给"市场活动源"按钮添加单击事件
	$("#findMarketActivityBtn").click(function () {
		//弹出"搜索市场活动'的模态窗口
		$("#findMarketActivityModal").modal("show");
		//清空搜索输入框的值
		$("#searchActivityText").val("");
		//清空搜索模态框中的数据
		$("#tBodyActivity").empty();
	});
	//给"市场活动源搜索框"添加键盘弹起事件
	$("#searchActivityText").keyup(function () {

		//收集参数
		var activityName=this.value;
		//发送请求
		$.ajax({
			url:'workbench/tran/searchActivityByName.do',
			data:{
				activityName:activityName
			},
			type:'post',
			dataType:'json',
			success:function (response) {
				//遍历data，显示每一条市场活动
				var htmlStr="";
				$.each(response.data,function (index,obj) {
					htmlStr+="<tr>";
					htmlStr+="<td><input type=\"radio\" value=\""+obj.id+"\" activityName=\""+obj.name+"\" name=\"activity\"/></td>";
					htmlStr+="<td>"+obj.name+"</td>";
					htmlStr+="<td>"+obj.startDate+"</td>";
					htmlStr+="<td>"+obj.endDate+"</td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="</tr>";
				});
				//把htmlStr显示在列表
				$("#tBodyActivity").html(htmlStr);
			}
		});
	});
	//给所有的市场活动源"单选按钮"添加单击事件
	$("#tBodyActivity").on("click","input[type='radio']",function () {
		//收集参数
		var id=this.value;
		var activityName=$(this).attr("activityName");
		//把id显示在隐藏域中，把activityName显示在输入框中
		$("#create-activityId").val(id);
		$("#create-activitySrc").val(activityName);
		//关闭搜索市场活动的模态窗口
		$("#findMarketActivityModal").modal("hide");
	});

	//给"联系人搜索"按钮添加单击事件
	$("#findContactsBtn").click(function () {
		//弹出"搜索市场活动'的模态窗口
		$("#findContactsModal").modal("show");
		//清空搜索输入框的值
		$("#searchActivityText").val("");
		//清空搜索模态框中的数据
		$("#tBodyContact").empty();
	});
	//给"联系人搜索框"添加键盘弹起事件
	$("#searchContactsText").keyup(function () {
		//收集参数
		var fullName=this.value;
		layer.msg(fullName);
		//发送请求
		$.ajax({
			url:'workbench/tran/searchContactsByName.do',
			data:{
				fullName:fullName
			},
			type:'post',
			dataType:'json',
			success:function (response) {
				//遍历data，显示每一条市场活动
				var htmlStr="";
				$.each(response.data,function (index,obj) {
					htmlStr+="<tr>";
					htmlStr+="<td><input type=\"radio\" value=\""+obj.id+"\" fullName=\""+obj.fullName+"\" /></td>";
					htmlStr+="<td>"+obj.fullName+"</td>";
					htmlStr+="<td>"+obj.email+"</td>";
					htmlStr+="<td>"+obj.mphone+"</td>";
					htmlStr+="</tr>";
				});
				//把htmlStr显示在列表
				$("#tBodyContact").html(htmlStr);
			}
		});
	});
	//给所有的联系人搜索"单选按钮"添加单击事件
	$("#tBodyContact").on("click","input[type='radio']",function () {
		//收集参数
		var id=this.value;
		var fullName=$(this).attr("fullName");
		//把id显示在隐藏域中，把activityName显示在输入框中
		$("#create-contactsId").val(id);
		$("#create-contactsName").val(fullName);
		//关闭搜索市场活动的模态窗口
		$("#findContactsModal").modal("hide");
	});


	//给"保存"按钮添加单击事件
	$("#saveCreateTranBtn").click(function () {
		//收集参数
		var owner=$("#create-transactionOwner").val();
		var money=$.trim($("#create-amountOfMoney").val());
		var name=$.trim($("#create-transactionName").val());
		var expectedDate=$("#create-expectedClosingDate").val();
		var customerName=$.trim($("#create-accountName").val());
		var customerId=$("#create-customerId").val();
		var stage=$("#create-transactionStage").val();
		var type=$("#create-transactionType").val();
		var source=$("#create-clueSource").val();
		var activityId=$("#create-activityId").val();
		var contactsId=$("#create-contactsId").val();
		var contactsName=$("#create-contactsName").val();
		var description=$.trim($("#create-describe").val());
		var contactSummary=$.trim($("#create-contactSummary").val());
		var nextContactTime=$("#create-nextContactTime").val();
		//表单验证(作业)
		//判断cost是否合法,非负浮点数
		var regExp = /^\d+(\.\d+)?$/;
		if (!regExp.test(money)) {
			layer.msg("成本只能是非负整数");
			return;
		}
		if(name == null || name == ""){
			layer.msg("名称不能为空")
			return;
		}
		if(customerName == null || customerName == ""){
			layer.msg("名称不能为空")
			return;
		}
		//发送请求
		$.ajax({
			url:'workbench/transaction/saveCreateTran.do',
			data:{
				owner:owner,
				money:money,
				name:name,
				expectedDate:expectedDate,
				customerName:customerName,
				customerId:customerId,
				stage:stage,
				type:type,
				source:source,
				activityId:activityId,
				contactsId:contactsId,
				contactsName:contactsName,
				description:description,
				contactSummary:contactSummary,
				nextContactTime:nextContactTime,
			},
			type:'post',
			dataType:'json',
			success:function (data) {
				if (data.successCode=="1"){
					//跳转到交易的主页面
					window.location.href = "workbench/transaction/index.do";
					layer.msg("保存成功")
				}else{
					//提示信息
					layer.msg(data.message);
				}
			}
		});
	});


});
</script>
</head>
<body>

	<!-- 查找市场活动模态框 -->
	<div class="modal fade" id="findMarketActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="searchActivityText" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="tBodyActivity">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人模态框 -->
	<div class="modal fade" id="findContactsModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询" id="searchContactsText">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="tBodyContact">

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button id="saveCreateTranBtn" type="button" class="btn btn-primary">保存</button>
			<button type="button" class="btn btn-default">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionOwner">
					<option value="${sessionScope.USERINFO.id}" selected>${sessionScope.USERINFO.name}</option>
					<c:forEach items="${requestScope.users}" var="u">
						<option value="${u.id}">${u.name}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-amountOfMoney">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label mydate">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydate" id="create-expectedClosingDate">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-customerId">
				<input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-transactionStage">
			  	<option></option>
			  	<c:forEach items="${stageList}" var="s">
					<option value="${s.id}">${s.value}</option>
				</c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionType">
				  <option></option>
				  <c:forEach items="${transactionTypeList}" var="tt">
						<option value="${tt.id}">${tt.value}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-clueSource">
				  <option></option>
				  <c:forEach items="${sourceList}" var="so">
					 <option value="${so.id}">${so.value}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#findMarketActivity" id="findMarketActivityBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-activityId" >
				<input type="text" class="form-control" id="create-activitySrc" >
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#findContacts" id="findContactsBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-contactsId">
				<input type="text" class="form-control" id="create-contactsName" >
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-describe" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-describe"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydate" id="create-nextContactTime">
			</div>
		</div>
		
	</form>
</body>
</html>